<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>确认订单 - 恩爸商城</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/order.css">
    <link rel="stylesheet" href="js/notify/toastr.min.css"></link>
</head>
<body>
    <!-- 头部 -->
    <div class="header">
        <div class="container">
            <div class="logo">
                <a href="index.html">恩爸商城</a>
            </div>
            <div class="order-title">确认订单</div>
        </div>
    </div>

    <!-- 主要内容 -->
    <div class="main">
        <div class="container">
            <!-- 收货地址 -->
            <div class="address-section">
                <h3 class="section-title">收货地址</h3>
                <div class="address-list">
                    <!-- <div class="address-item active">
                        <div class="address-info">
                            <div class="name-phone">
                                <span class="name">张三</span>
                                <span class="phone">138****8888</span>
                            </div>
                            <div class="address-detail">
                                北京市海淀区西二旗大街58号院
                            </div>
                            <div class="default-tag">默认地址</div>
                        </div>
                    </div>
                    <div class="address-item add-address">
                        <i class="add-icon">+</i>
                        添加新地址
                    </div> -->
                </div>
            </div>

            <!-- 商品信息 -->
            <div class="goods-section">
                <h3 class="section-title">商品信息</h3>
                <div class="goods-list">
                    <!-- 商品列表将由 JavaScript 动态插入 -->
                </div>
            </div>

            <!-- 支付方式 -->
            <div class="payment-section">
                <h3 class="section-title">支付方式</h3>
                <div class="payment-list">
                    <div class="payment-item active" data-method="1">
                        <img src="images/zhifubao.jpg" alt="支付宝">
                        <span class="payment-name">支付宝</span>
                    </div>
                    <div class="payment-item" data-method="2">
                        <img src="images/weixin.jpg" alt="微信支付">
                        <span class="payment-name">微信支付</span>
                    </div>
                    <div class="payment-item" data-method="0">
                        <img src="images/yinlian.jpg" alt="银联支付">
                        <span class="payment-name">银联支付</span>
                    </div>
                </div>
            </div>

            <!-- 订单信息 -->
            <div class="order-info">
                <div class="info-item">
                    <span class="label">商品金额：</span>
                    <span class="value" id="totalPrice">¥0.00</span>
                </div>
                <div class="info-item">
                    <span class="label">运费：</span>
                    <span class="value">¥0.00</span>
                </div>
                <div class="info-item total">
                    <span class="label">实付金额：</span>
                    <span class="value" id="finalPrice">¥0.00</span>
                </div>
            </div>

            <!-- 提交订单 -->
            <div class="submit-section">
                <div class="submit-info">
                    <div class="address-confirm">
                        <div class="shipping-to">
                            寄送至：<span id="selectedAddress"></span>
                        </div>
                        <div class="receiver-info">
                            收货人：<span id="selectedName"></span> <span id="selectedPhone"></span>
                        </div>
                    </div>
                    <div class="price-confirm">
                        应付金额：<span class="final-price" id="confirmPrice"></span>
                    </div>
                </div>
                <button class="submit-btn">立即支付</button>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="js/addressData.js"></script>
    <script type="module" src="js/order.js"></script>

    <!-- 添加地址弹窗 -->
    <div class="address-modal" id="addressModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>添加收货地址</h3>
                <span class="close-btn">&times;</span>
            </div>
            <div class="modal-body">
                <form class="address-form">
                    <div class="form-item">
                        <label>收货人：</label>
                        <input type="text" name="name" placeholder="请输入收货人姓名">
                    </div>
                    <div class="form-item">
                        <label>手机号码：</label>
                        <input type="tel" name="phone" placeholder="请输入手机号码">
                    </div>
                    <div class="form-item">
                        <label>所在地区：</label>
                        <div class="area-select">
                            <select name="province">
                                <option value="">请选择省份</option>
                                <option value="北京">北京市</option>
                                <option value="上海">上海市</option>
                                <!-- 可以添加更多省份 -->
                            </select>
                            <select name="city">
                                <option value="">请选择城市</option>
                                <option value="北京">北京市</option>
                                <option value="上海">上海市</option>
                            </select>
                            <select name="district">
                                <option value="">请选择区县</option>
                                <option value="海淀">海淀区</option>
                                <option value="朝阳">朝阳区</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-item">
                        <label>详细地址：</label>
                        <textarea name="address" placeholder="请输入详细地址，如街道名称、门牌号等"></textarea>
                    </div>
                    <div class="form-item">
                        <label>邮政编码：</label>
                        <input type="text" name="postalCode" placeholder="请输入邮政编码">
                    </div>
                    <div class="form-item checkbox">
                        <input type="checkbox" name="isDefault" id="isDefault">
                        <label for="isDefault">设为默认地址</label>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn-cancel">取消</button>
                <button class="btn-save">保存</button>
            </div>
        </div>
    </div>


    <script src="js/notify/toastr.min.js"></script>
    <script src="js/notify/notify.js"></script>
</body>
</html> 